<script type="text/javascript">
  //gadgets.window.adjustHeight(); 
var zeilen;
var spalten;
var isOn;


function test(id){

var splitedID=new Array();
var completeID = id;
splitedID = id.split(",");
var row = splitedID[0];
var cell = splitedID[1];


var text = document.getElementById('table2').rows[row].cells[cell].innerHTML;
if ((text.search("<INPUT")) == 0 || (text.search("<input")) == 0){
	return;
}

document.getElementById(completeID).innerHTML="<input type='text' onblur='zuText(this.value, this.id)' id='" + completeID + "' value='" + text + "'/>";
document.getElementById(completeID).focus();

/*alert(text);
var str2 = document.getElementById(id).value;
alert(row + " and " + cell);*/
var inputtable = document.getElementById('table3').value;
wave.getState().submitDelta({'htmltable': inputtable});
gadgets.window.adjustHeight(); 
}

function zuText(str2, id2){
//alert(str2 + " and " + id2);
var completeID = id2;
var splitedID=new Array();
splitedID = id2.split(",");
var row = splitedID[0];
var cell = splitedID[1];


document.getElementById(completeID).innerHTML=str2;
var fixtable = document.getElementById('table3').innerHTML;
//alert (fixtable);
wave.getState().submitDelta({'htmltable': fixtable});
gadgets.window.adjustHeight(); 
}



function tableErstellen(){

if (document.table2edit.spalten.value == 0 || document.table2edit.spalten.value == "spalten" || 
document.table2edit.zeilen.value == 0 || document.table2edit.zeilen.value == "zeilen"){
return;
}

var i = 0;
var x = 0;
var table;

zeilen = parseInt(document.table2edit.zeilen.value);
spalten = parseInt(document.table2edit.spalten.value);
table = "<table id=\"table2\" border=\"1\">";

if (document.table2edit.head.checked == true){
table = table + "<thead><tr id='" + i + "'>";
for (x=0; x<=(spalten-1); x++){
		table = table + '<th onclick="test(this.id)" id="' + i + ',' + x + '">Spalte ' + (x+1) + '</th>';
	}
table = table + "</tr></thead><tbody>";
isOn = 1;
wave.getState().submitDelta({'isOn': isOn});
}else{
table = table + "<tbody>";
isOn = 0;
wave.getState().submitDelta({'isOn': isOn});
}


for (i=isOn; i<=(zeilen-1); i++){
	table = table + "<tr id='" + i + "'>";
	for (x=0; x<=(spalten-1); x++){
		table = table + '<td onclick="test(this.id)" id="' + i + ',' + x + '">Spalte ' + (x+1) + '</td>';
	}
	table = table + "</tr>";
}
table = table + "</tbody></table>";
document.getElementById('table3').innerHTML=table;
document.getElementById("addColumn1").disabled = false;
document.getElementById("addRow1").disabled = false;
wave.getState().submitDelta({'column': spalten});
wave.getState().submitDelta({'row': zeilen});
wave.getState().submitDelta({'htmltable': table});
gadgets.window.adjustHeight();
}

function testIsNumeric(){

if (!IsNumeric(document.table2edit.zeilen.value)) 
   { 
      alert('Bitte geben Sie nur Nummern in das Zeilen feld ein'); 
      document.table2edit.zeilen.value.focus();
      return;
      }  
	  
if (!IsNumeric(document.table2edit.spalten.value)) 
   { 
      alert('Bitte geben Sie nur Nummern in das Spalten feld ein'); 
      document.table2edit.zeilen.value.focus(); 
      return; 
      }  

tableErstellen();

}

function IsNumeric(sText)

{
   var ValidChars = "0123456789";
   var IsNumber=true;
   var Char;

 
   for (i = 0; i < sText.length && IsNumber == true; i++) 
      { 
      Char = sText.charAt(i); 
      if (ValidChars.indexOf(Char) == -1) 
         {
         IsNumber = false;
         }
      }
   return IsNumber;
   
   }
   
function loadTable() {
    if(!wave.getState().get('htmltable')) {
        document.getElementById('table3').innerHTML="Please give in the number of rows and spans.";
		gadgets.window.adjustHeight();
    }else {
		document.getElementById('table3').innerHTML=wave.getState().get('htmltable');
		document.getElementById("addColumn1").disabled = false;
		document.getElementById("addRow1").disabled = false;
		zeilen = parseInt(wave.getState().get('row'));
		spalten = parseInt(wave.getState().get('column'));
		isOn = parseInt(wave.getState().get('isOn'));
		gadgets.window.adjustHeight();
    } 
}
   
function init() {
      if (wave && wave.isInWaveContainer()) {
        wave.setStateCallback(loadTable);
      }
}

gadgets.util.registerOnLoadHandler(init);

function addRow(){
var x=document.getElementById('table2');
var y = 0;
var newTableRow = x.innerHTML;
var length = newTableRow.length;

length = length - 8;
newTableRow = newTableRow.slice(0,length);
newTableRow = newTableRow + "<tr id='" + zeilen + "'>";

for (y=0; y<=(spalten-1); y++){
	newTableRow = newTableRow + '<td onclick="test(this.id)" id="' + (zeilen) + ',' + y + '">Spalte ' + (y+1) + '</td>';
	gadgets.window.adjustHeight();
}
newTableRow = newTableRow + "</tr></tbody>";
x.innerHTML=newTableRow;
//zeilen = zeilen+1;
wave.getState().submitDelta({'row': zeilen + 1});
var fixtable = document.getElementById('table3').innerHTML;
wave.getState().submitDelta({'htmltable': fixtable});
gadgets.window.adjustHeight();
}

function addColumn(){
var y = 0;
var newTableColumn;

if (isOn == 1){
	newTableColumn = document.getElementById(y).innerHTML;
	newTableColumn = newTableColumn + '<th onclick="test(this.id)" id="' + y + ',' + spalten + '">Spalte ' + (spalten+1) + '</th>';
	document.getElementById(y).innerHTML = newTableColumn;
	gadgets.window.adjustHeight();
}
for (y=isOn; y<=(zeilen-1); y++){
	newTableColumn = document.getElementById(y).innerHTML;
	newTableColumn = newTableColumn + '<td onclick="test(this.id)" id="' + y + ',' + spalten + '">Spalte ' + (spalten+1) + '</td>';
	document.getElementById(y).innerHTML = newTableColumn;
	gadgets.window.adjustHeight();
}
//spalten = spalten + 1;
wave.getState().submitDelta({'column': spalten + 1});
var fixtable = document.getElementById('table3').innerHTML;
wave.getState().submitDelta({'htmltable': fixtable});
gadgets.window.adjustHeight();
}

function deleteMode(){
if (document.table2edit.delete1.checked == true){
var y = 0;
var deleteTableRow;
for (y=0; y<=(zeilen-1); y++){
deleteTableRow = document.getElementById(y).innerHTML;
	deleteTableRow = deleteTableRow + '<td><input type="button" value="delete" onclick="deleteRow(this)"></td>';
	document.getElementById(y).innerHTML = deleteTableRow;
	var fixtable = document.getElementById('table3').innerHTML;
	wave.getState().submitDelta({'htmltable': fixtable});
	gadgets.window.adjustHeight();
}
}else{
var y = 0;
var deleteTableRow;
var length
for (y=0; y<=(zeilen-1); y++){
	deleteTableRow = document.getElementById(y).innerHTML;
	length = deleteTableRow.length;
	length = length - 71;
	deleteTableRow = deleteTableRow.slice(0,length);

	deleteTableRow = deleteTableRow;
	document.getElementById(y).innerHTML = deleteTableRow;
	var fixtable = document.getElementById('table3').innerHTML;
	wave.getState().submitDelta({'htmltable': fixtable});
	gadgets.window.adjustHeight();
	}
}
}

function deleteRow(r)
{
var i=r.parentNode.parentNode.rowIndex;
document.getElementById('table2').deleteRow(i);
var fixtable = document.getElementById('table3').innerHTML;
wave.getState().submitDelta({'htmltable': fixtable});
wave.getState().submitDelta({'row': zeilen - 1});
}
</script>
<div id="content_div" >
<p>Give in the number of rows and columns and click send.</p><br/>
<form name="table2edit" id="table2edit">
					<input type="text" name="spalten" id="spalten" value="columns"/>
					<input type="text" name="zeilen" id="zeilen" value="rows"/>
					<input type="checkbox" name="head">first line as header
					<!--<input type="submit" name="senden" value="senden" onclick="return testIsNumeric();"/>-->
					<button type="button" name="senden" onclick="return testIsNumeric();">Send</button><br/><br/>
					<input type="button" disabled="disabled" id="addRow1" onclick="addRow();" value="insert row">
					<input type="button" disabled="disabled" id="addColumn1" onclick="addColumn();" value="insert column">
					<input type="checkbox" name="delete1" onchange="deleteMode();">delete mode
				</form><br/>
<div id="table3">
</div>
 </div>